<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.hprogress.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A HProgress chart with custom title</title>

    <meta name="description" content="A HProgress bar chart which has a custom title that is drawn using the ondraw event" />
     
</head>
<body>

    <h1>A HProgress chart with custom title</h1>    
        <p>
            With this chart the title is not drawn using  the title property - instead it is drawn using the ondraw
            custom event along with the RGraph.Text() API function.
        </p>

    <canvas id="cvs" width="600" height="100">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            var hprogress = new RGraph.HProgress({
                id: 'cvs',
                min: 0,
                max: 100,
                value: 89
            }).on('draw', function (obj)
            {
              obj.context.fillStyle = 'black';
              RGraph.Text2(obj, {
                                 'font': 'Arial italic',
                                 'size': 16,
                                 'x': obj.canvas.width / 2,
                                 'y': obj.Get('gutter.top') - 5,
                                 'text': 'A custom title drawn with the ondraw event',
                                 'valign': 'bottom',
                                 'halign': 'center'
                                });
            }).draw();
        })
    </script>

    <p>        
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>